<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fe6</title>
    <style>
        .radio-button {
            display: inline-block;
            padding: 10px;
            cursor: pointer;
        }

        .active {
            background: red;
        }

        .mask {
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 100;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.0;
        }

        .mask-active {
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 100;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.0;
        }

        .player {
            position: relative;
            background: white;
            z-index: 101;
        }

        button {
            z-index: 102;
        }

    </style>
</head>
<body>
<div class="login-form">
    <input id="id-input-username" type="text" value="juran">
    <br>
    <input id="id-input-password" type="password" value="123">
    <br>
    <button id="id-button-login">登录按钮</button>
</div>

<!--选项卡    -->
<div class="radio-control">
    <span class="radio-button active">html</span>
    <span class="radio-button">js</span>
    <span class="radio-button">css</span>
</div>

<div class="mask">
</div>

<div class="player">
    播放器
</div>

<button id="id-button-light" name="button">开关灯</button>

<script>
    var log = function () {
        console.log.apply(console, arguments)
    }

    log('查找元素-代码开始')

    var body = document.querySelector('body')
    var form = document.querySelectorAll('.login-form')
    var loginButton = document.querySelector('#id-button-login')

    log('selector', body, form, loginButton)
    //操作元素的属性
    //获取特定属性值
    log('操作元素的属性')
    var user = document.querySelector('#id-input-username')
    var userValue = user.getAttribute('value')
    log('user value', userValue)

    //设置特定属性值
    user.setAttribute('不存在的属性', '新用户名')

    //查询属性是否存在
    log(user.hasAttributes())
    log(user.hasAttribute('value'))
    //删除某个元素属性
    // user.removeAttribute('type')
    //获取所有属性
    var attributes = user.attributes
    log('所有属性', attributes)

    //操作元素（创建，删除，修改）
    //用document.createElement函数创建一个元素
    var button = document.createElement('button')
    button.innerHTML = '注册用户'
    //修改
    var form = document.querySelector('.login-form')

    //删除
    var pwd = document.querySelector('#id-input-password')
    // form.removeChild(pwd)
    // pwd.remove()

    //事件
    var loginButton = document.querySelector('#id-button-login')
    var clicked = function () {
        // log('按钮被点击到')
        console.log('按钮被点击到')
    }
    loginButton.addEventListener('click', clicked)

    var buttons = document.querySelectorAll('.radio-button')

    function clearActive() {
        var active = document.querySelector('.active')
        if (active != null) {
            active.classList.remove("active")
        }
    }

    for (var i = 0; i < buttons.length; i++) {
        var button = buttons[i]
        button.addEventListener('click', function (event) {
            var self = event.target
            clearActive()
            self.classList.add('active')
        })
    }

    var toggle = function (element, cls) {
        if (element.classList.contains(cls)) {
            element.classList.remove(cls)
        } else {
            element.classList.add(cls)
        }
    }

    var light = document.querySelector('#id-button-light')
    var klgr  = function () {
        log('开关灯')
        var mask  = document.querySelector('.mask')
        toggle(mask,'mask-active')
    }
    light.addEventListener('click',klgr)
</script>
</body>
</html>